@import "../../../variable.less";
.panel-container{
  padding: 15px;
  .code-login{
    position: relative;
    height: 165px;
    .code-left,.code-error-2017{
      position: absolute;
      top:0;
      left:50%;
      margin-left: -80px;
    }
    .code-left{
      transition: all .4s ease .2s;
    }
    .code-error-2017{
      display: none;
      .code-error{
        background: #000;
        opacity: .6;
        width:159px;
        height: 169px;
      }
      p{
        position: absolute;
        top: 30%;
        left: 25px;
        color: #fff;
        font-weight: bold;
        font-size: 1.1rem;
      }
      a{
        position: absolute;
        top: 60%;
        left: 50%;
        background: red;
        color: #fff;
        padding: 5px 18px;
        font-weight: bold;
        font-size: 1.1rem;
        margin-left: -35px;
      }
    }
    .phone{
      position: absolute;
      top:0;
      right:0;
      opacity: 0;
      transition: all .4s ease .2s;
    }
  }
  .code-login {
    .code-left.active {
      left: 0;
      margin-left: 0;
    }
    .active + .phone-right {
      .phone {
        opacity: 1;
      }
    }

  }
  .erweima{
    border:1px solid @linecolor;
    padding: 10px 5px;
  }
  .code-panel{
    width: 175px;
    margin: 18px auto;
    font-size: 0.8rem;
    text-align: center;
    a{
      color: @inputcolor;
    }
  }
  .safe-tip{
    padding:5px 15px 5px 45px;
  }
}
